<!-- 个人信息 -->
<template>
	<view class="container" style="padding: 16rpx;padddding-right 40rpx;">
		<view class="user-list u-flex u-row-between">
			<text class="list-name">充值方式</text>
			<view class="u-flex">
				<text class="list-val">π币支付</text>
			</view>
		</view>
		<view class="user-list  u-flex u-row-between u-m-b-10" >
			<text class="list-name">名称</text>
			<view class="u-flex">
				<input
					class="list-val"
					v-model="form.name"
					placeholder="请输入名称"
					maxlength="50"
					placeholder-style="color:#c8c9cc;fontSize:28rpx"
				/>
			</view>
		</view>
		<view style="margin: 32rpx;">
			<view class="recharge-content" style="background-color: #1EAD3A;">
				<view class="left">
					<image :src="form.wechat_img" mode="scaleToFill" @click="TanPreviewImage(form.wechat_img)" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class="right">
					<view>1.点击左边二维码图片放大</view>
					<view>2.长按二维码图片保存到相册</view>
					<view>3.然后点击微信右上方的加号按钮</view>
					<view>4.再扫一扫保存到相册的二维码图片</view>
				</view>
			</view>
			<view style="margin-top: 10rpx;font-size: 26rpx;">
				转账时在“添加留言”处填写订单码：
				<text style="color: #C00000;">{{form.order_code}}</text>
			</view>
		</view>
		<view class="u-flex u-row-between u-p-x-30 info-head u-p-y-20">
			<view class="info-title" style="color: #C00000;">充值记录</view>
		</view>
		<view class="user-list u-flex u-row-between">
			<text class="list-name">转入方式</text>
			<view class="u-flex">
				<text class="list-val">π币支付</text>
			</view>
		</view>
		<view class="user-list  u-flex u-row-between" >
			<text class="list-name">转入金额</text>
			<view class="u-flex">
				<input
					class="list-val"
					v-model="form.price"
					placeholder="请输入转入金额"
					maxlength="50"
					type="number"
					@input="onWithdrawInput"
				/>
			</view>
		</view>
		<view class="user-list  u-flex u-row-between" >
			<text class="list-name">转入账号</text>
			<view class="u-flex">
				<input
					class="list-val"
					v-model="form.account"
					placeholder="填写自己的账号"
					maxlength="50"
					placeholder-style="color:#c8c9cc;fontSize:28rpx"
				/>
			</view>
		</view>
		<view style="margin: 32rpx;" @tap="onChooseImg">
			<view class="upload-content">
				<view v-if="!form.evidence" style="padding-top: 110rpx;">
					<u-icon name="plus" color="grey" size="60"></u-icon>
				</view>
				<view v-if="!form.evidence">上传打卡凭证</view>
				<view v-if="form.evidence">
					<image :src="form.evidence" class="update-img"></image>
				</view>
			</view>	
		</view>
		<view style="margin:60rpx 32rpx 32rpx">
			<u-button type="primary"  @click="submit">提交</u-button>
		</view>
		
    <u-select v-model="showType" mode="single-column" :list="list" :default-value="[0]" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
import wechat from '@/shopro/wechat/wechat';

export default {
	components: {},
	data() {
		return {
			showType: false,
			list: [
				{
					value: 1,
					label: 'π币支付'
				},
			],
			form:{
				type:'π币支付',
				pay_type:1,
				name:'',
				inType:"",
				price:'',
				evidence:'',
				account:"",
				order_code:"",
				wechat_img:"",
				ali_img:"",
			}
		};
	},
	computed: {
		...mapGetters(['userInfo', 'authType'])
	},
	onLoad() {
		this.userData = JSON.parse(JSON.stringify(this.userInfo));
		this.getConfig()
	},
	methods: {
		TanPreviewImage(img) {
						let images = [];
						images[0] = img
						uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://21111889:8970/6_1597822634094.png"]
							current: 0,//这里是判断到点击列表上的某个图片，就读取索引的图片
							urls: images,//这是整个内容的图片数组，放一个数组里，就可以左右切换了
							longPressActions: { //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data) => {
									console.log(data);
									uni.saveImageToPhotosAlbum({ //保存图片到相册
										filePath: payUrl,
										success: function() {
											uni.showToast({
												icon: 'success',
												title: '保存成功'
											})
										},
										fail: (err) => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，请重新尝试'
											})
										}
									});
								},
								fail: (err) => {
									console.log(err.errMsg);
								}
							}
						});
					},
		onWithdrawInput(e) {
			let sVal = String(e.detail.value);
			sVal = sVal.replace(/\b(0+)/gi, '');
			sVal = sVal.replace(/[^\d]/g, '');
			this.form.price = sVal;
		},
		getConfig(){
			let that = this
			that.$http(
				'common.rechargeConfig'
			).then(res => {
				if (res.code === 1) {
					that.form.name = res.data.name
					that.form.order_code = res.data.order_code
					that.form.wechat_img = res.data.wechat_img
					that.form.ali_img = res.data.ali_img
					console.log(res)
				}
			});
		},
		confirm(e) {
			console.log(e);
			this.form.type=e[0].label
			this.form.pay_type=e[0].value
			this.showType=!this.showType
		},
		changeType(){
			this.showType=!this.showType
		},
		// 更换头像
		async onChooseImg() {
			const chooseImageRes = await this.chooseImage(1);
			const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
			console.log(uploadImageRes)
			this.form.evidence = uploadImageRes.fullurl;
			this.$forceUpdate()
		},
		
		// 图片处理-选择图片
		async chooseImage(count = 1) {
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						resolve(res.tempFilePaths);
					}
				});
			}).catch(e => {
				console.log(e);
			});
		},
		// 图片处理-上传图片
		async uploadImage(url) {
			const that = this;
			return new Promise((resolve, reject) => {
				that.$u.toast('上传中...');
				uni.uploadFile({
					url: that.$API_URL + 'index/upload',
					filePath: url,
					name: 'file',
					success: res => {
						res = JSON.parse(res.data);
						if (res.code === 1) {
							that.$u.toast('上传成功');
							resolve(res.data);
						} else {
							that.$u.toast('上传失败');
						}
					},
					complete: e => {
						uni.hideLoading();
					}
				});
			}).catch(e => {
				console.log(e);
			});
		},
		// 提交
		submit() {
			let that = this;
			if (!that.form.price) {
				this.$u.toast('金额不能为空');
				return false;
			}
			that.$http(
				'user.rechargePi',
				{
					pay_type: that.form.pay_type,
					price: that.form.price,
					order_code: that.form.order_code,
					account: that.form.account,
					evidence: that.form.evidence,
				},
				'保存中...'
			).then(res => {
				if (res.code === 1) {
					
					that.$u.toast('提交成功');
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	// 基本信息
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
		.save-btn {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 100rpx;
			border-radius: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}
		.dis-btn {
			opacity: 0.5;
		}
	}
	// 三方
	.other-account {
		.head-title {
			line-height: 82rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
		.list-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		.account-list {
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx;
			.info {
				.avatar {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.bind-box {
				.bind-btn {
					padding: 0 20rpx;
					line-height: 60rpx;
					background: #f5f6f8;
					border-radius: 20rpx;
					color: #999;
				}
				.relieve-btn {
					border-radius: 20rpx;
					padding: 0 20rpx;
					line-height: 60rpx;
					background: rgba(#ff0000, 0.05);
					color: #ff0000;
				}
			}
		}
	}
	
	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;
		.list-name {
			font-size: 28rpx;
		}
		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}
		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
	}
	
	.btn-box {
		margin-top: 200rpx;
	
		.logout-btn {
			width: 710rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #f54141;
		}
		.hover-logout-btn {
			width: 710rpx;
			height: 80rpx;
			background: #f54141;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
.upload-content{
	background-color: #fff;
	height: 300rpx;
	width: 100%;
	text-align: center;
	border-radius: 10rpx;
}
.update-img{
	width: 100%;height:300rpx;border-radius: 10rpx;
}
.recharge-content{
	padding: 32rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: start;
	.left{
		
	}
	.right{
		padding-left: 40rpx;
		font-size: 26rpx;
		color: #fff;
	}
}
</style>
